<template>
  <div>
    <i-dialog
      :title="'查询设备版本'"
      :visible="visible"
      width="642px"
      :close-on-click-modal="false"
      @open="outerOpen"
      @close="outerClose"
    >
      <div class="text-center">{{ text }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerClose">关闭</el-button>
      </span>
    </i-dialog>
  </div>
</template>
<script>
import { getDeviceVersion } from '@/api/device'
export default {
  name: 'DeviceVersion',
  data() {
    return {
      text: '正在获取版本号…',
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    deviceId: {
      type: String,
      required: true,
    },
  },
  computed: {
    options() {
      return this.optionTypeObj[this.type]
    },
  },
  methods: {
    outerOpen() {
      getDeviceVersion({ deviceId: this.deviceId }).then(
        (res) => {
          this.text = res
        },
        () => {
          this.text = '查询失败'
        }
      )
    },
    outerClose() {
      this.$emit('update:visible', false)
      this.$emit('update:deviceId', '')
      this.$nextTick(() => {
        this.text = '正在获取版本号…'
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.checkbox-group {
  display: flex;
  flex-direction: column;
}
.value-text {
  margin-left: 10px;
}
</style>
